<script lang="ts" setup>
import { ref } from 'vue'

const childNavIndex = ref<number>(0)


</script>


<template>
  <div class="latestMusicWrap">
    <div class="childNav">
      <RouterLink to="/LatestMusic">
        <p class="newSong"
           :class="childNavIndex === 0 ? 'active' : ''"
           @click="() => childNavIndex = 0"
        >
          新歌速递
        </p>
      </RouterLink>
      <RouterLink to="/NewCD">
        <p class="newCD"
           :class="childNavIndex === 1 ? 'active' : ''"
           @click="() => childNavIndex = 1"
        >
        新碟上架
        </p>
      </RouterLink>
    </div>
    <router-view />
  </div>
</template>


<style lang="scss" scoped>
.latestMusicWrap {
  @extend .pageWrapSize;

  .childNav {
    display: flex;
    align-items: center;
    width: 240px;
    height: 30px;
    font-size: $font-size-sm;
    font-family: $textFont;
    margin: 10px auto 0;
    padding: 1px;
    transform: translateX(-30px);
    border-radius: 25px;
    border: 1px solid $lineColor;

    a {
      width: 100%;
    }

    .newSong {
      width: 100%;
      line-height: 30px;
      text-align: center;
      border-radius: 25px;

      &:hover {
        background-color: $BK_GRAY;
      }
    }

    .newCD {
      width: 100%;
      line-height: 30px;
      text-align: center;
      border-radius: 25px;

      &:hover {
        background-color: $BK_GRAY;
      }
    }

    .active {
      // color: #fff;
      // background-color: rgb(187,187,187);
      @include color('color');
      @include background_color('bk_color');

      // &:hover {
      //   background-color: rgb(187,187,187) !important;
      // }
    }

  }

}

</style>
